/**
*
* @author zzhijie
* @date 2021-07-01
*/

<template>
  <div>
    <el-form-item label="宽度">
      <div style="width: 250px">
        <el-slider
          v-model="params.size.width"
          :step="0.1"
          :max="1920"
          show-input>
        </el-slider>
      </div>
    </el-form-item>
    <el-form-item label="高度">
      <div style="width: 250px">
        <el-slider
          v-model="params.size.height"
          :step="0.1"
          :max="1080"
          show-input>
        </el-slider>
      </div>
    </el-form-item>
    <el-form-item label="边框">
      <div>
        <el-button type="text" style="margin-right: 10px" @click="handleCreateBorder">创建</el-button>
        <el-select class="img-select" v-model="params.borderImage" clearable>
          <el-option v-for="(item,index) in borderImgList" :key="item.id" :value="item.id" :label="'边框'+item.id">
          </el-option>
        </el-select>
      </div>
    </el-form-item>
    <el-form-item label="背景色">
      <el-color-picker v-model="params.backgroundColor" size="small"></el-color-picker>
    </el-form-item>
    <el-form-item label="背景图片">
      <uploader
        :value="params.backgroundImage"
        :on-remove="e=>params.backgroundImage=''"
        :on-success="e=>params.backgroundImage=e.url">
      </uploader>
    </el-form-item>
    <el-form-item label="背景透明度">
      <div style="width: 250px">
        <el-slider
          v-model="params.opacity"
          :step="0.1"
          :max="1"
          show-input>
        </el-slider>
      </div>
    </el-form-item>
  </div>
</template>

<script>
import Uploader from "@/components/uploader";
import {eventBus} from "@/utils/eventBus";
import {LIST_BORDER_IMG} from "@/api/base";

export default {
  name: "commonConfig",
  components: {Uploader},
  props: {
    params: {
      type: Object,
      required: true,
    },
  },
  data() {
    return {}
  },
  computed: {
    borderImgList() {
      return this.$store.state.borderImgList;
    },
  },
  methods: {
    handleCreateBorder() {
      eventBus.emit("setShowFlag", true);
    }
  },
  mounted() {

  }
}
</script>

<style lang="scss" scoped>

</style>
